<style>
    .sega-modal .ivu-modal-body > div:first-child,.sega-modal .ivu-modal-body > form:first-child {
        padding-right: 20px;
    }
</style>
<template>
    <Modal class="sega-modal" :loading="loading" :mask-closable="maskClosable" :closable="closable"  :title="title" :width="width" v-model="showed" @on-visible-change="visiableChanged" @on-ok="handleOk" @on-cancel="handleCancel">
        <slot></slot>
        <slot name="footer" slot="footer"></slot>
    </Modal>
</template>

<script>
export default {
    props: {
        show: {
            type: Boolean,
            default: false
        },
        title: {
            type: String
        },
        width: {
            type: Number
        },
        maskClosable: {
            type: Boolean,
            default: false
        },
        closable: {
            type: Boolean,
            default: true
        }
    },
    data () {
        return {
            loading: true,
            showed: false
        }
    },
    watch: {
        loading (v) {
            if (!v) {
                setTimeout(() => {
                    this.loading = true
                }, 20)
            }
        },
        show (v) {
            this.showed = v
            this.$nextTick(() => {
                // 解决滚动条保留上次位置的问题
                let overflowDom = document.querySelectorAll('.sega-modal *')
                    if (overflowDom) {
                        overflowDom.forEach((item) => {
                            if (item.scrollTop !== 0 ) {
                                item.scrollTop = 0
                            }
                        })
                    }
            })
        },
        showed (v) {
            if (!v) {
                this.$emit('update:show', v)
            }
        }
    },
    methods: {
        visiableChanged (v) {
            if (!v) {
                this.$emit('on-cancel')
                this.modalVisiableChanged()
            }
        },
        resetLoading () {
            setTimeout(() => {
                this.loading = false
            }, 500)
        },
        getSlotDefault () {
            let slotDefault = {}
            this.$slots.default.forEach(element => {
                if (element.componentInstance) {
                    slotDefault = element.componentInstance
                }
            })
            return slotDefault
        },
        handleOk () {
            let slotDefault = this.getSlotDefault()
            if (slotDefault.handleOk) {
                if (slotDefault.handleOk.apply(slotDefault)) {
                    this.showed = false
                }
            }
            this.loading = false
        },
        handleCancel () {
            let slotDefault = this.getSlotDefault()
            if (slotDefault.handleCancel) {
                slotDefault.handleCancel.apply(slotDefault)
            }
        },
        modalVisiableChanged () {
            let slotDefault = this.getSlotDefault()
            if (slotDefault.visiableChanged) {
                slotDefault.visiableChanged.apply(slotDefault)
            }
        }
    }
}
</script>

<style>
</style>
